<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

interface TaskForm {
  id: string
  title: string
  content: string
  status: string
  assignee: {
    id: number
    avatar: string
    name: string
  }
  dueDate: string
  progress: number
  priority: string
}

const props = defineProps<{
  visible: boolean
  taskStatus: Record<string, string>
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'create', task: TaskForm): void
}>()

// 新任务表单
const taskForm = ref<TaskForm>({
  id: '',
  title: '',
  content: '',
  status: props.taskStatus.TODO,
  assignee: {
    id: 0,
    avatar: '',
    name: ''
  },
  dueDate: '',
  progress: 0,
  priority: 'medium'
})

// 重置表单
const resetForm = () => {
  taskForm.value = {
    id: `TBT-${Math.floor(Math.random() * 1000)}`,
    title: '',
    content: '',
    status: props.taskStatus.TODO,
    assignee: {
      id: 0,
      avatar: '',
      name: ''
    },
    dueDate: '',
    progress: 0,
    priority: 'medium'
  }
}

// 确认创建
const handleConfirm = () => {
  if (!taskForm.value.title) {
    ElMessage.warning('请输入任务标题')
    return
  }
  
  emit('create', { ...taskForm.value })
  resetForm()
}

// 取消创建
const handleCancel = () => {
  emit('update:visible', false)
  resetForm()
}

// 监听弹窗显示，重置表单
watch(() => props.visible, (newVal) => {
  if (newVal) {
    resetForm()
  }
})
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="创建任务"
    width="50%"
    @update:modelValue="$emit('update:visible', $event)"
  >
    <el-form :model="taskForm" label-width="100px">
      <el-form-item label="任务标题" required>
        <el-input v-model="taskForm.title" placeholder="请输入任务标题" />
      </el-form-item>
      <el-form-item label="任务内容">
        <el-input
          v-model="taskForm.content"
          type="textarea"
          :rows="4"
          placeholder="请输入任务详细内容"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="taskForm.status">
          <el-option
            v-for="status in Object.values(taskStatus)"
            :key="status"
            :label="status"
            :value="status"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="优先级">
        <el-select v-model="taskForm.priority">
          <el-option label="高" value="high" />
          <el-option label="中" value="medium" />
          <el-option label="低" value="low" />
        </el-select>
      </el-form-item>
      <el-form-item label="进度">
        <el-slider
          v-model="taskForm.progress"
          :step="0.1"
          :max="1"
          :format-tooltip="(val) => Math.round(val * 100) + '%'"
        />
      </el-form-item>
      <el-form-item label="截止日期">
        <el-date-picker
          v-model="taskForm.dueDate"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">创建</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 